<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const menuItems = ref([
  { id: 1, name: 'Mock 接口列表', path: '/' },
  { id: 2, name: '创建 Mock 接口', path: '/create' },
  { id: 3, name: '请求历史', path: '/history' },
  { id: 4, name: '系统设置', path: '/settings' }
])

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div class="sidebar">
    <h2>Mock 管理系统</h2>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :router="false"
    >
      <el-menu-item
        v-for="item in menuItems"
        :key="item.id"
        :index="item.id.toString()"
        @click="navigateTo(item.path)"
      >
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  border-right: 1px solid #e6e6e6;
  background-color: #f5f5f5;
}

.sidebar h2 {
  text-align: center;
  padding: 20px 0;
  margin: 0;
  background-color: #409eff;
  color: white;
}
</style>